<template>
  <el-row justify="space-around" class="big">
    <el-col :span="16" class="b1">
      <span>
        <div
          ref="pieChart"
          style="
            width: 100%;
            background-color: white;
            padding: 10rem;
            border-radius: 10rem 0 0 10rem;
            height: 300rem;
          "
        ></div>
      </span>
      <span>
        <div
          ref="barChart"
          style="
            width: 100%;
            background-color: white;
            padding: 10rem;
            border-radius: 0 10rem 10rem 0;
            height: 300rem;
          "
        ></div>
      </span>
    </el-col>
    <el-col :span="6">
      <div
        ref="ThrChart"
        style="
          width: 93%;
          background-color: white;
          padding: 10rem;
          border-radius: 10rem;
          height: 300rem;
        "
      ></div>
    </el-col>
  </el-row>
</template>
  
<script setup>
import { ref } from 'vue'
import * as echarts from 'echarts'
import axios from '@/utils/api'

const uslist = ref([])
let vipUser = ref([])
let adminUser = ref([])
let ordinaryUser = ref([])
// 请求用户信息列表
const userlist = () => {
  return axios.post('http://localhost:3000/login/userlist')
}
// 使用 ref 引用 DOM 元素
const barChart = ref(null)
const pieChart = ref(null)
const ThrChart = ref(null)

// 订单
const Order = () => {
  return axios.post('http://localhost:3000/api/order')
}

let allOder = ref([])
let pay = ref(0)
let notpay = ref(0)
let finlish = ref(0)
Order().then((res) => {
  allOder.value = res.data.orderResult
  // console.log('allOder', allOder.value)

  allOder.value.forEach((item) => {
    if (item.state == '已付款') {
      pay.value += item.price * item.num
      console.log('pay', pay.value)
    } else if (item.state == '未付款') {
      notpay.value += item.price * item.num
      console.log('notpay', notpay.value)
    } else if (item.state == '已完成') {
      finlish.value += item.price * item.num
      console.log('finlish', finlish.value)
    }
  })
})

userlist().then((res) => {
  uslist.value = res.data.userAll
  vipUser = uslist.value.filter((user) => user.usertype === 'vip')
  adminUser = uslist.value.filter((user) => user.usertype === 'admin')
  ordinaryUser = uslist.value.filter((user) => user.usertype === 'user')

  if (barChart.value) {
    const myChart = echarts.init(barChart.value)
    // 绘制图表
    myChart.setOption({
      title: {
        text: '平台人数',
      },
      tooltip: {},
      xAxis: {
        data: ['管理员', '普通用户', '认证用户'],
      },
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            formatter: function (value) {
              return Math.floor(value) === value ? value : '' // 只显示整数
            },
          },
        },
      ],
      series: [
        {
          name: '人数',
          type: 'bar',
          data: [`${adminUser.length}`, `${ordinaryUser.length}`, `${vipUser.length}`],
          itemStyle: {
            // 设置每个柱子的颜色
            color: (params) => {
              const colors = ['#9500ff', '#00ceb2', '#ff4a76'] // 可以根据数据项的不同设置不同的颜色
              return colors[params.dataIndex] // 根据数据项索引选择颜色
            },
          },
        },
      ],
    })
  }

  if (pieChart.value) {
    const myChart = echarts.init(pieChart.value)
    // 绘制图表
    myChart.setOption({
      title: {
        text: '用户类型占比',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '50%',
          data: [
            { value: `${ordinaryUser.length}`, name: '普通用户' },
            { value: `${vipUser.length}`, name: '认证用户' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    })
  }

  if (ThrChart.value) {
    const myChart = echarts.init(ThrChart.value)
    myChart.setOption({
      angleAxis: {},
      radiusAxis: {
        type: 'category',
        data: [' ', '   ', ''],
        z: 10,
      },
      polar: {},
      series: [
        {
          type: 'bar',
          data: [pay.value],
          coordinateSystem: 'polar',
          name: '已付款',
          stack: 'a',
          emphasis: {
            focus: 'series',
          },
        },
        {
          type: 'bar',
          data: [0, notpay.value],
          coordinateSystem: 'polar',
          name: '未付款',
          stack: 'a',
          emphasis: {
            focus: 'series',
          },
        },
        {
          type: 'bar',
          data: [0, 0, finlish.value],
          coordinateSystem: 'polar',
          name: '已完成',
          stack: 'a',
          emphasis: {
            focus: 'series',
          },
        },
      ],
      legend: {
        show: true,
        data: ['已付款', '未付款', '已完成'],
      },
    })
  }
})
</script>
<style scoped lang="less">
.big{
  height: 300rem;
  overflow: hidden;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  height: 100%;
  &.b1 {
    display: flex;
    justify-content: space-between;
    span {
      width: 49%;
      height: 200rem;
    }
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
  